<div class="row-content am-cf" id="main-box" v-cloak>
    <div class="row" v-loading="loading">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title a m-cf">消息中心</div>
                </div>
                <div class="widget-body am-fr">
                    <div class="tool-box">
                        <div style="margin-right: 10px">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        </div>
                        <?php if (checkPrivilege('mail/clearmail')): ?>
                        <el-button type="warning" icon="el-icon-edit" @click="clear_mail()" size="medium">标记已读</el-button>
                        <?php endif; ?>
                        <?php if (checkPrivilege('mail/addmail')): ?>
                        <el-button type="primary" icon="el-icon-edit" @click="open_mail_pop()" size="medium">发送新消息</el-button>
                        <?php endif; ?>
                    </div>
                    <div class="content-box">
                        <el-checkbox-group v-model="checkList">
                            <div class="item-box" v-for="(item,index) in list" :key="index">
                                <div class="mail-box">
                                    <div class="check-box">
                                        <el-checkbox v-if="item.is_read == 0" :label="item.id" :key="item.id">[[ '' ]]</el-checkbox>
                                    </div>
                                    <div>
                                        <div class="title" v-if="item.type == 1">系统通知</div>
                                        <div class="title" v-if="item.type == 2">接收业务</div>
                                        <div class="title" v-if="item.type == 3">私信</div>
                                    </div>
                                    <div class="dian" v-if="item.is_read == 0"></div>
                                </div>
                                <div class="item-content">
                                    <span>[[ item.content ]]</span>
                                </div>
                                <div class="time-box">
                                    <div class="">
                                        <span>发送时间:</span>
                                        <span>[[ item.update_time ]]</span>
                                    </div>
                                    <div style="margin-left: 20px">
                                        <span>发送人:</span>
                                        <span>[[ item.user_name ]]</span>
                                    </div>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                    <div class="page-box">
                        <el-pagination
                                background
                                @current-change="changePage"
                                :page-size="search_data.row"
                                :current-page="search_data.page"
                                layout="prev, pager, next"
                                :total="search_data.total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="发送消息" :visible.sync="dialogFormVisible" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="接收用户" prop="accept_user_id">
                <el-select v-model="ruleForm.accept_user_id" multiple placeholder="请选择接收用户" filterable style="width: 100%">
                    <el-option v-for="(item,index) in user_data" :key="index" :label="item.user_name" :value="item.store_user_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="消息类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
                    <el-option label="系统通知" value="1"></el-option>
                    <el-option label="紧急业务" value="2"></el-option>
                    <el-option label="私信" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="消息内容" prop="content">
                <el-input type="textarea" v-model="ruleForm.content"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="send_mail()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    const userData = <?= $userData ?>;
    document.getElementById("main-box") && ( vm = new Vue({
        el: '#main-box',
        delimiters: ['[[', ']]'],
        data() {
            return {
                dialogFormVisible: false,
                user_data: [],
                loading: false,
                isIndeterminate: false,
                checkAll:false,
                ruleForm: {
                    accept_user_id: [],
                    type: "1",
                    content: '',
                },
                checkList: [],
                search_data: {
                    row: 20,
                    page:1,
                    total: 0
                },
                list: [],
                rules: {
                    accept_user_id: [
                        { required: true, message: '请选择接收用户', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请选择消息类型', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写消息内容', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.get_list();
            userData.unshift({
                'store_user_id': -1,
                'user_name': '所有用户'
            });
            this.user_data = userData;
        },
        methods:{
            open_mail_pop() {
                this.ruleForm = {
                    accept_user_id: '',
                    type: "1",
                    content: '',
                }
                this.dialogFormVisible = true;
            },
            send_mail() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('<?= url('store/mail/addMail');?>',this.ruleForm).then(res => {
                            if (+res.data.code === 200) {
                                this.$message({
                                    message: '发送成功',
                                    type: 'success'
                                });
                                this.loading = false;
                                this.dialogFormVisible = false;
                                this.get_list();
                                return;
                            }
                            this.loading = false;
                            this.$message.error('服务器开小差了，请稍后重试');
                            this.dialogFormVisible = false;
                        });
                    } else {
                        this.$message({
                            message: '您还有信息未填写完成',
                            type: 'warning'
                        });
                        return false;
                    }
                })
            },
            get_list() {
                axios.post('<?= url('store/mail/getList');?>',this.search_data).then(res => {
                    if (+res.data.code === 200) {
                        this.list = res.data.data.data;
                        this.search_data.total = res.data.data.total;
                        this.loading = false;
                        return;
                    }
                    this.loading = false;
                    this.$message.error('服务器开小差了，请稍后重试');
                    this.dialogFormVisible = false;
                });
            },
            handleCheckAllChange(val) {
                console.log(val);
                if (val) {
                    this.list.forEach(item => {
                        this.checkList.push(item.id);
                    })
                } else {
                    this.checkList = [];
                }
            },
            clear_mail() {
                if (this.checkList.length == 0) {
                    this.$message({
                        message: '请勾选消息后重试！',
                        type: 'warning'
                    });
                    return;
                }
                this.loading = true;
                axios.post('<?= url('store/mail/clearMail');?>',{
                    ids: this.checkList
                }).then(res => {
                    if (+res.data.code === 200) {
                        this.search_data.page = 1;
                        this.get_list();
                        this.loading = false;
                        this.$message({
                            message: '清除成功！',
                            type: 'success'
                        });
                        this.checkAll = false;
                        mail.getNumm();
                        return;
                    }
                    this.loading = false;
                    this.$message.error('服务器开小差了，请稍后重试');
                    this.dialogFormVisible = false;
                });
            },
            changePage(val) {
                this.loading = true;
                this.search_data.page = val;
                this.get_list();
            }
        }
    }));
</script>
<style>
    .content-box .item-box{
        padding: 20px 0;
        border-bottom: 1px solid ;
        /*box-shadow: inset 0 -1px 0 #e8e8e8;*/
        border-bottom: 1px solid #e8e8e8;
    }
    .content-box .item-box .title {
        font-size: 17px;
    }
    .content-box .item-box .item-content {
        margin-top: 6px;
        margin-left: 30px;
    }
    .content-box .item-box .item-content span{
        font-size: 15px;
        color: #999;
        line-height: 15px;
    }
    .content-box .item-box .time-box{
        display: flex;
        font-size: 15px;
        color: #999;
        line-height: 15px;
        margin-top: 10px;
        margin-left: 30px;
    }
    .mail-box {
        position: relative;
        display: flex;
        align-items: center;
        line-height: 17px;
    }
    .dian {
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: red;
        position: absolute;
        top: 8px;
        left: 22px;
    }
    .page-box {
        margin-top: 10px;
    }
    .check-box {
        display: flex;
        align-content: center;
        margin-right: 10px;
        width: 21px;
    }
    label {
        margin-bottom: 0;
    }
    .tool-box {
        display: flex;
        align-items: center;
    }
</style>
